Виджеты. Text Image Icon

➡️Скачать презентацию. Flutter Text Image Icon
➡️Скачать шпаргалку
➡️Ссылка на репозиторий с кодом этого урока

Виджеты для работы с изображениями

Добавление изображений в проект

Начнем с папки assets. Изображения будем грузить из этой директории в нашем проекте. Но для начала нужно правильно настроить конфигурационный файл pubspec.yaml и добавить сами изображения.

1.     Переходим в файл pubspec.yaml
2.     Ищем строку   #   - images/a_dot_burr.jpeg
3.     Убираем комментарии (символ #) и пишем путь папки с изображениями
4.     Например assets/images/
5.     Для вложенных элементов обязательно делаем отступ в 2 пробела
6.     Добавим в корне проекта директорию assets/images/ и скопируем изображения
7.     Приложение при этом нужно обязательно полностью перезагрузить

Чтобы добавить поддержку разных размеров одного и того же изображения (чтобы масштабировалось на разных устройствах правильно), в папке assets/images можно создавать специальные папки с именованием размера 2.0x и 3.0x

.../my_icon.png       (mdpi baseline)
.../1.5x/my_icon.png  (hdpi)
.../2.0x/my_icon.png  (xhdpi)
.../3.0x/my_icon.png  (xxhdpi)
.../4.0x/my_icon.png  (xxxhdpi)

                  

Виджеты для создания Image

Чтобы добавить изображение нужно использовать виджет Image(), аргумент image принимает ImageProvider():

• NetworkImage - получить приложение по сети
• AssetImage - получить изображение из набора ресурсов приложения
• FileImage - получить изображение с устройства
• MemoryImage - получить изображение из кэша

Виджет Image имеет также несколько удобных именованных конструкторов для получения изображения, которые делают тоже самое, что и код выше, но лаконичнее пишутся

AssetImage() получить изображение из набора ресурсов asset приложения

Добавим ещё один новый файл image_widget.dart

Center(
  child: Image(
    // Загрузка изображения черeз assets устройства
    image: AssetImage('assets/images/flutter-tyan.png'),
  )
)

                  

Center(
  // Используем более удобный именованный конструктор
  child: Image.asset('assets/images/flutter-tyan.png'),
)

                  

Файл image_widget.dart

import 'package:flutter/material.dart';

class ImageExample extends StatelessWidget {
  const ImageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Image.asset("assets/images/flutter-tyan.png"),
    );
  }
}
                  

NetworkImage() - получить изображение по сети

Center(
  child: Image(
    // ! Загрузка изображения черeз интернет
   image:NetworkImage('https://docs.flutter.dev/assets/images/dash/Dashatars.png'),
  ),
)

                  

Center(
  // Используем более удобный именованный конструктор
  child:Image.network('https://docs.flutter.dev/assets/images/dash/Dashatars.png'),
)

                  

Файл image_widget.dart

import 'package:flutter/material.dart';

class ImageExample extends StatelessWidget {
  const ImageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset("assets/images/flutter-tyan.png"),
        SizedBox(height: 10),
        Image.network('https://docs.flutter.dev/assets/images/dash/Dashatars.png'),
      ],
    );
  }
}
                  

Масштабирование изображений

Часто бывают ситуации, когда изображение полностью не помещается в нужном контейнере, чтобы контролировать это поведение у виджета есть:

1. свойства width и height, для жестокого задания размеров изображения.
2. свойство fit которое позволяет настроить расположение изображения внутри контейнера.

Обернем изображение в дополнительный виджет Container()

class ImageFitExample extends StatelessWidget {
  const ImageFitExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.green[100],
        width: 300,
        height: 200,
        child: Image.asset(
          'assets/images/flutter-tyan.png',
          fit: BoxFit.contain, // масштабируется по минимальной стороне
          // fit: BoxFit.cover,     // масштабируется по максимальной стороне
          // fit: BoxFit.fill,      // изображение заполняет все пространство контейнера
          // fit: BoxFit.fitHeight, // изображение растягивается по высоте
          // fit: BoxFit.fitWidth,  // изображение растягивается по ширине
          // fit: BoxFit.none,      // выравниваниется по центру. Размеры оригинала
          // fit: BoxFit.scaleDown, // выравниваниется по центру и масштабируется
        ),
      ),
    );
  }
}